<script setup lang="ts">
const { collection, getAll } = useVideo()
const route = useRoute()
const page = route.query.page as unknown as number
await getAll(page)
</script>

<template>
  <main v-if="collection">
    <HdCard>
      <template #header>最近跟新</template>
      <VideoItem v-for="video of collection.data" :key="video.id" :video="video" />
    </HdCard>
    <HdPagination
      :per_page="collection?.meta.per_page"
      :total="collection?.meta.total"
      @currentChange="$router.push({ name: 'video.index', query: { page: $event } })" />
  </main>
</template>
<style lang="scss" scoped></style>
